<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>

<body>
    <!-- 按钮 -->
    <button id="openModalBtn" data-name="John Doe">Open Modal</button>

    <!-- 模态框 -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal Title</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p id="modalContent">Modal content will be loaded here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card bg-primary text-white">
          <div class="card-body">
            <button type="button" class="btn btn-primary btn-nobg btn-zoom--hover mb-5">
              <span class="btn-inner--icon"><svg class="svg-inline--fa fa-arrow-left fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="arrow-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg><!-- <i class="fas fa-arrow-left"></i> --></span>
            </button>
            <span class="clearfix"></span>
            <!-- <img src="../assets/images/brand/icon.png" style="width: 50px;"> -->
            <h4 class="heading h3 text-white pt-3 pb-5">Welcome back,<br>
              login to your account.</h4>
            <form class="form-primary">
              <div class="form-group">
                <input type="text" class="form-control" id="input_user" placeholder="用户名">
              </div>
              <div class="form-group">
                <input type="password" class="form-control" id="input_password" placeholder="密码">
              </div>
              <div class="text-center mt-4" id="info">信息提示</div>
              <button type="button" class="btn btn-block btn-lg bg-white mt-4" id="btnLogin">Sign in</button>
            </form>
          </div>
        </div>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        document.getElementById('openModalBtn').addEventListener('click', function () {
            const name = this.getAttribute('data-name');
            document.getElementById('modalContent').textContent = `Hello, ${name}!`;
            $('#myModal').modal('show');
        });

        // 登录事件注册
        function onBtnLoginClick() {
            const username = document.getElementById('input_user').value.trim();
            const password = document.getElementById('input_password').value.trim();
            const correctUsername = 'JohnDoe'; // 假设正确的用户名
            const correctPassword = '123456'; // 假设正确的密码

            if (username === '' || password === '') {
                document.getElementById('info').textContent = '用户名和密码不能为空';
                document.getElementById('input_user').focus();
                return;
            }

            if (username === correctUsername && password === correctPassword) {
                console.log('登录');
                document.getElementById('info').textContent = '登录成功';
                localStorage.setItem('isLogined', '1');
                setTimeout(handleLocation, 1000);
            } else {
                document.getElementById('info').textContent = '登录信息有误';
                document.getElementById('input_user').value = '';
                document.getElementById('input_password').value = '';
                document.getElementById('input_user').focus();
            }
        }

        function handleLocation() {
            window.location.href = 'index.html'; // 假设个人简介首页为 profile.html
        }

        document.getElementById('btnLogin').addEventListener('click', onBtnLoginClick);

        // 判断登录状态并处理跳转
        window.onload = function () {
            const isLogined = localStorage.getItem('isLogined');
            if (isLogined === '1') {
                // 如果已登录，跳转到个人简介首页
                if (window.location.href.includes('login.html')) {
                    window.location.href = 'index.html'; // 如果当前页面是登录页，则跳转
                }
            }
        }

        // 个人简介首页上的退出登录按钮处理
        function onLogoutClick() {
            localStorage.removeItem('isLogined');
            window.location.href = 'login.html'; // 跳转到登录页
        }

        // 假设在个人简介首页上有退出登录按钮
        // <button onclick="onLogoutClick()" id="btnLogout">退出登录</button>
    </script>
</body>

</html>
